﻿$(function () {

    //表单验证器的初始化
    $('#userAddForm').bootstrapValidator({
        excluded:[":disabled"],
        feedbackIcons: {  //显示表单验证结果的图标
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            name: {
                validators: {
                    notEmpty: {
                        message: '用户名不能为空！'
                    },  stringLength: {
                        min: 1,
                        max: 6,
                        message: '用户名长度不能小于1位或超过6位！'
                    }}}
                    ,
                    sex: {
                        validators: {
                            notEmpty: {
                                message: '密码不能为空！'
                            },
                            stringLength: {
                                min: 1,
                                max: 6,
                                message: '密码长度不能小于1位或超过6位！'
                            }
                        }
                    },beizhu: {
                        validators: {
                            notEmpty: {
                                message: '备注不能为空！'
                            },
                            stringLength: {
                                min: 4,
                                max: 20,
                                message: '用户备注不能小于4位或超过20位！'
                            }
                        }
                    },
            orgNames: {
                validators: {
                    notEmpty: {
                        message: '部门不能为空！'
                    }
                }
            }
            }
    });

});

var columns = [
    {
        title: '姓名',
        dataIndex:'name',
        align:'center',
        sorter:(a, b) => a.name.localeCompare(b.name),
        width: '10%'
    }, {
        title: '性别',
        dataIndex:'sex',
        align:'center',
        width: '10%'
    }, {
        title: '出生年月',
        dataIndex:'birth',
        align:'center',
        width: '30%'
    }, {
        title: '电话号码',
        dataIndex:'phone',
        align:'center',
        width: '10%'
    }, {
        title: '爱好',
        dataIndex:'habby',
        align:'center',
        width: '10%'
    }, {
        title: '操作',
        dataIndex:'',
        align:'center',
        scopedSlots: { customRender: 'action'},
        width: '30%'
    }
];
//分页设置
var pagination = {
    showSizeChanger: true,//每页显示多少条记录是否需要?
    showQuickJumper:true,//跳到第几页要不要？
    pageSizeOptions:['5', '10', '15'],
    pageSize:5,//每页的数据条数
    current: 1,//当前页
    position:'bottom',//top,both,bottom，显示的位置
    total: 0,//数据的总条数
    onChange: (current) => { // 切换分页时的回调，
        // 当在页面定义change事件时，切记要把此处的事件清除，因为这两个事件重叠了，可能到时候会导致一些莫名的bug
        this.pagination.current = current;
    }
};
var v = new Vue({
    el:'#app',
    data () {
        return {
            info: null,
            id:null,
            name:'',
            sex:'',
            birth:'',
            phone:'',
            habby:'',
            modalTitle:'',
            key:'save',
            columns:columns,
            dataSources:null,
            pagination:pagination,
            selectedRowKeys:[],
            selectedRows:[]

        }
    },
    methods:{
        //自定义行
        customRow(record, index){
            return{
                style:{
                    'background-color':'#ffffff'
                },
                on:{
                    click: (event) => {
                        if(this.selectedRowKeys.length>0 && this.selectedRowKeys.includes(record.id)){
                            this.selectedRowKeys.splice(this.selectedRowKeys.indexOf(record.id),1);
                        }else
                        {
                            this.selectedRowKeys.push(record.id);
                        }
                    }
                }
            }
        },
        //行选中事件
        onSelectChange(selectedRowKeys,selectedRows){
            this.selectedRowKeys = selectedRowKeys;
            this.selectedRows = selectedRows;
        },
        //提交操作
        operate(){
            //触发表单验证
            $('#userAddForm').data('bootstrapValidator').validate();//验证
            var tag = $('#userAddForm').data('bootstrapValidator').isValid();//验证状态true或false
            if(tag){

                if(this.key=='save'){
                    this.saveData();
                } else{
                    this.updateData();
                }
            }
        },
        //打开添加对话框
        openAdd(){
            //重置验证
            $('#userAddForm').data("bootstrapValidator").resetForm();

            this.clearData();
            $('#myModal').modal('show');
            this.modalTitle = '用户添加';
            this.key = 'save';

        },
        //打开修改对话框
        openUpdate(item){
            this.clearData();
            //重置验证
            $('#userAddForm').data("bootstrapValidator").resetForm();
            $('#myModal').modal('show');
            this.modalTitle = '用户修改';
            this.name = item.name;
            this.sex = item.sex;
            this.birth = item.beizhu;
            this.phone = item.phone;
            this.habby = item.habby;
            this.id = item.id;
            //模态框显示数据
            this.key = 'update';
        },
        //加载数据
        loadData(){
            axios({
                url:'person/getAllData.do',
                method:'post'

            }).then(function (res) {
                v.dataSources = res.data;
            }).catch(function (reason) {
                alert('请求失败')
            });
        },
        clearData(){
            this.name = '';
            this.sex = '';
            this.birth = '';
            this.phone = '';
            this.habby = '';
        },
        //查询用户
        selectData(){
            axios({
                url:'person/selectData.do',
                method:'post',
                data:{name:this.name}

            }).then(function (res) {
                v.dataSources = res.data;
            }).catch(function (reason) {
                alert('请求失败')
            });

        },
        //删除用户
        deleteData(id){
            axios({
                url:'person/deleteData.do',
                method:'post',
                data:{
                    id:id
                }

            }).then(function (res) {
                if(res.data.result=='success'){
                    alert('删除成功！');
                    //刷新数据
                    v.loadData();
                }else{
                    alert('删除失败！');
                }

            }).catch(function (reason) {

            });
        },
        //修改用户
        updateData(){
            axios({
                url:'person/updateData.do',
                method:'post',
                data:{
                    name:this.name,
                    sex:this.sex,
                    birth:this.birth,
                    phone:this.phone,
                    habby:this.habby,
                    id:this.id
                }

            }).then(function (res) {
                if(res.data.result=='success'){
                    alert('修改成功！');
                    //关闭模态框
                    $('#myModal').modal('hide');
                    v.clearData();
                    //刷新数据
                    v.loadData();
                }else{
                    alert('修改失败！');
                }

            }).catch(function (reason) {

            });
        },
        //保存用户
        saveData(){
            axios({
                url:'person/saveData.do',
                method:'post',
                data:{
                    name:this.name,
                    sex:this.sex,
                    birth:this.birth,
                    phone:this.phone,
                    habby:this.habby

                }

            }).then(function (res) {
                if(res.data.result=='success'){
                    alert('保存成功！');
                    //关闭模态框
                    $('#myModal').modal('hide');
                    v.clearData();
                    //刷新数据
                    v.loadData();
                }else{
                    alert('保存失败！');
                }

            }).catch(function (reason) {

            });
        }

    },
    mounted () {
        this.loadData();
    }

});